@import 'side';

$mq-col1: $mq-col1-uniboard;
$mq-col2: $mq-col2-uniboard;
$mq-col3: $mq-col3-uniboard;

.tv-single {
  grid-template-areas: 'app' 'under' 'side' 'uchat';

  @include breakpoint($mq-col2) {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto fit-content(0) fit-content(0);
    grid-template-areas: 'app   app' 'side under';

    &__app {
      justify-self: center;
    }
  }

  @include breakpoint($mq-col3) {
    grid-template-columns: $col3-uniboard-side $col3-uniboard-width $col3-uniboard-table;
    grid-template-rows: fit-content(0);
    grid-template-areas: 'side app   app' 'side under .';

    @include crosstable-large;
  }

  .round__underboard {
    overflow: hidden;
  }

  .tv-history {
    h2 {
      @extend %roboto, %page-text;

      font-size: 1.3em;
      text-transform: uppercase;
      margin: $block-gap 0;
      flex: 0 0 100%;
      text-align: center;
    }

    .now-playing {
      grid-template-columns: 50% 50%;
    }
  }
}
